<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*.xing{
				font-size: 24px;
			}*/
			.xing span{
				display: inline-block;
				width: 12px;
			}
		</style>
	</head>
	<body>
		<label>请输入行数：</label>
		<input type="text" id="rows"/>
		<input type="button" value="确定" onclick="xing()"/>
		<div class="xing" id="x"></div>
		<script type="text/javascript">
			function xing () {
				var s="";
				var r=document.getElementById("rows").value;
				for(var i=-(r-1);i<r;i++){
					for(var j=0;j<Math.abs(i);j++)
						s=s+"<span></span>";
					for(var j=0;j<2*r-2*Math.abs(i)-1;j++)
						s=s+"<span>*</span>";
						s=s+"<br/>";
				}
				document.getElementById("x").innerHTML=s;
			}		
		</script>
	</body>
</html>
